// 角色列表
import React, {Component} from 'react';
import {connect} from 'react-redux';
import Header from './Header';
import RoleTableList from './RoleTableList';
import action from '../../store/actions/roleList';
import {isRoleEnabled} from '../../api';
import '../../../node_modules/animate.css/animate.css';
import {Pagination} from 'antd';


class RoleList extends Component {
  state = {
    visible: false,
    data: {},
    current: 1
  };

  // 抽屉打开
  showDrawer = () => {
    this.setState(prevState => {
      return {
        visible: true
      };
    });
  };

  // 抽屉关闭
  onClose = () => {
    this.setState(prevState => {
      return {
        visible: false,
        data: {}
      };
    });
  };

  // 角色编辑处理
  roleEdit = data => {
    this.setState(prevState => {
      return {
        data,
        visible: true
      };
    });
    console.log('*****************************************', this.state.data);
  };

  // 禁用/启用
  isEnabledTemp = data => {
    console.log(data);
    let {group_id, is_true} = data;
    is_true = is_true === 1 ? 2 : 1;
    isRoleEnabled({group_id, is_true}).then(res => {
      const {GET_ROLE_LIST} = this.props;
      GET_ROLE_LIST();
    }).catch(err => {
      console.log(err);
    });

  };

  pageChange = page => {
    this.setState({
      current: page
    });
    const {GET_ROLE_LIST} = this.props;
    GET_ROLE_LIST(page);
  };

  componentDidMount() {
    const {GET_ROLE_LIST} = this.props;
    GET_ROLE_LIST();
  }

  render() {
    const {current, roleListData, pageCount} = this.props;
    const {visible, data} = this.state;
    return (
      <div className='animated slideInDown'>
        <Header
          visible={visible}
          showDrawer={this.showDrawer}
          onClose={this.onClose}
          {...data}
        />
        {/*角色列表*/}
        <RoleTableList
          roleListData={roleListData}
          roleEdit={this.roleEdit}
          isEnabledTemp={this.isEnabledTemp}
        />
        <Pagination
          pageSize={20}
          current={this.state.current}
          onChange={this.pageChange}
          total={pageCount ? pageCount : 1}
          style={{textAlign: 'center', marginTop: '20px'}}
          hideOnSinglePage
        />

      </div>
    );
  }

}

const mapStateToProps = state => state.roleList;
export default connect(mapStateToProps, action)(RoleList);
